<template>
  <div class="vocation-container">
    <el-tabs type="card">

      <el-tab-pane label="请假审核">

        <el-button type="success"
                   v-show="isMultipleOrder"
                   plain
                   style="width: 100%"
                   @click="handleConfirmationMultiple(multipleSelection)"
        >批量通过
        </el-button>
        <el-table
            :border="true"
            :data="activityLeaveList"
            highlight-current-row
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            max-height="660"
            style="width: 100%"
        >

          <el-table-column
              type="selection"
              width="55"/>
          <el-table-column
              label="序号"
              type="index"
              width="50"
          />
          <el-table-column label="志愿者姓名">
            <template slot-scope="scope">
              <span v-if="scope.row.volunteerEntity">{{ scope.row.volunteerEntity.volunteerName }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="请假时间"
              prop="activityleaveDatetime"
              width="200"
          />
          <el-table-column
              label="请假理由"
              prop="activityleaveReason"
          />

          <el-table-column label="活动名称">
            <template slot-scope="scope">
              <span v-if="scope.row.activityEntity">{{ scope.row.activityEntity.activityName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="活动地点">
            <template slot-scope="scope">
              <span v-if="scope.row.activityEntity">{{
                  scope.row.activityEntity.activityAddress|toJsonParse|address
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="活动日期">
            <template slot-scope="scope">
              <span v-if="scope.row.activityEntity">{{ scope.row.activityEntity.activityDatetime }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <button class="cu-btn round bg-green" @click="toAuditActivityLeave(scope.row)">通过</button>
              <button class="cu-btn round bg-red" @click="handleDelete(scope.row)">拒绝</button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivityLeave"
            @current-change="handleGetByNumActivityLeave"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="option.action.refuse" title="请输入拒绝原因">
      <el-input v-model="option.action.reason" placeholder="请输入拒绝原因" type="textarea"></el-input>
      <span slot="footer">
          <el-button @click="handleConfirmLeave(option.action)">确认</el-button>
          <el-button @click="option.action.refuse= false">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activityLeaveList: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      reasonShow: false,
      option: {
        action: {
          refuse: false,
          id: null,
          reason: "",
        },
      },
      multipleSelection: [],

    };
  },
  mounted () {
    this.handleGetActivityLeaveInfo();
  },
  computed: {
    isMultipleOrder () {
      return this.multipleSelection.length !== 0;
    },

  },
  methods: {
    // 分页查询全部待审核活动
    async handleGetActivityLeaveInfo () {
      const res = await this.$http.managerGetLeave({
        status: 0,
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      console.log(res);
      if (res.code !== 0) return null;
      this.activityLeaveList = res.data.list;
      this.total = res.data.totalCount;
    },

    async handleGetBySizeActivityLeave (size) {
      this.currentPageSize = size;
      await this.handleGetActivityLeaveInfo();
    },

    // 分页查询全部活动
    async handleGetByNumActivityLeave (num) {
      this.currentPage = num;
      await this.handleGetActivityLeaveInfo();

    },

    async handleGetActivityInfo (params) {
      this.articleContentshow = true;
      const res = await this.$http.handleGetActivityLeaveInfo(params);
      if (res.code !== 0) return null;
      this.content = res.data;

    },
    //  审核请假
    async toAuditActivityLeave (info) {
      const params = {
        id: info.activityleaveId,
        status: 1,
      };
      const res = await this.$http.managerAuditActivityLeave(params);
      if (res.code !== 0) return null;
      await this.handleGetActivityLeaveInfo();

    },
    async handleDelete (info) {
      this.option.action.id = info.activityleaveId;
      this.option.action.refuse = true;
    },
    async handleConfirmLeave (info) {
      if (!info.reason) return this.$alert("请填写驳回原因");
      let params = {
        id: info.id,
        reason: info.reason,
        status: 0,
      };
      const res = await this.$http.managerAuditActivityLeave(params);
      if (res.code !== 0) return null;
      await this.handleGetActivityLeaveInfo();

    },

    handleSelectionChange (value) {
      console.log(`value-->`, value);
      this.multipleSelection = value;

    },
    async handleConfirmationMultiple (multipleSelection) {
      if (multipleSelection.length === 0) return null;

      const leaveId = multipleSelection.map((item) => item.activityleaveId);
      const res = await this.$http.batchAuditActivityLeave({ leaveId });

      if (res.code !== 0) return this.$alert("出错啦");

      await this.handleGetActivityLeaveInfo();
      return this.$alert("处理成功");

    },
  },
};
</script>
<style scoped>
.cu-btn {
  user-select: none;
  cursor: pointer;
  margin-left: 1em;
}
</style>
